<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../resources/css/bootstrap/bootstrap.min.css">
    <link href="../../resources/font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="../../resources/css/plugins/nouslider/jquery.nouislider.css" rel="stylesheet">
    <link rel="stylesheet" href="../../resources/css/style.css">
    <link rel="stylesheet" href="../../resources/css/pluginsExt/common.css">
</head>
<body>
<div class="wrapper wrapper-content animated fadeInRight gray-bg">
    <div class="row">
    <div class="col-sm-5">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>范围滑块</h5>
                <div class="ibox-tools">
                    <a class="collapse-link">
                        <i class="fa fa-chevron-up"></i>
                    </a>
                    <a class="dropdown-toggle" data-toggle="dropdown" href="form_advanced.html#">
                        <i class="fa fa-wrench"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-user">
                        <li><a href="form_advanced.html#">选项1</a>
                        </li>
                        <li><a href="form_advanced.html#">选项2</a>
                        </li>
                    </ul>
                    <a class="close-link">
                        <i class="fa fa-times"></i>
                    </a>
                </div>
            </div>
            <div class="ibox-content">
                <h3>
                    范围滑块
                </h3>
                <p>
                    简单干净的范围选择滑块
                </p>
                <div class="row m-b-lg">
                    <div class="col-sm-12">
                        <div id="drag-fixed" class="slider_red"></div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <p class="font-bold">简单示例</p>
                        <div id="basic_slider"></div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>
</div>
</body>
<script src="../../resources/js/jquery-2.1.1.js"></script>
<script src="../../resources/js/plugins/nouslider/jquery.nouislider.min.js"></script>
<script>
    $("#basic_slider").noUiSlider({
        start: [0,0],
        behaviour: 'drag',
        connect: true,
        range: {
            'min':  0,
            'max':  80
        }
    });

    $("#drag-fixed").noUiSlider({
        start: [ 40, 60 ],
        behaviour: 'drag-fixed',
        connect: true,
        range: {
            'min':  20,
            'max':  80
        }
    });
</script>
</html>